<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第五天 数据驱动视图</title>
</head>
<body>
	<div id="app">

	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
	<script type="text/javascript">
		//<keep-alive> 包裹 <router-link>  则会缓存组件状态 不会执行destroyed

		let Login = {
			template:`<div>
						登录
					  </div>`,
			created(){
				console.log('登录组件创建了');
			},
			mounted(){
				console.log('登录组件DOM加载了');
			},
			destroyed(){
				console.log('登录组件被销毁了');
			}
		};

		let Home = {
			template:`<div>
						<span  @click="clickHandler">首页</span>
					  </div>`,
			created(){
				console.log('首页组件创建了');
			},
			mounted(){
				console.log('首页组件DOM加载了');
			},
			destroyed(){
				console.log('首页组件被销毁了');
			},
			methods:{
				clickHandler(event){
					event.target.style.color = 'red'
				}
			}
		};


		let router = new VueRouter({
			routes:[{
				path:'/login',
				component:Login
			},
			{
				path:'/home',
				name:'home',
				component:Home
			}]
		});


		Vue.component('App',{
			template:`<div>
						<router-link to='/login'>登录</router-link>
						<router-link :to="{name:'home'}">首页</router-link>
						<keep-alive>
							<router-view/>
						</keep-alive>
					  </div>`
		})

		new Vue({
			el:'#app',
			data(){
				return {

				}
			},
			router:router,
			template:`<App/>`
		})
	</script>
</body>
</html>
